

// 更改
// 挂载layui，添加jquery和form 一会我们会用到
layui.use(['layer', 'jquery', 'form'], function () {
	// 这个时候将挂载到layui中的layer放置到一个变量上面，有助于我们调用
	var layer = layui.layer
	var $ = layui.jquery
	var form = layui.form
	form.render(null, 'form')
	// 首先第一种调用方法就是(采用的是jquery的点击事件)
	$('#userBtnupa').on('click', function (e) {
		// 调用的layer弹窗
		layer.open({
			type: 1,
			title: '新增人员',
			area: ['80%', '80%'],//弹框大小  屏幕宽度的80%，高度的80%；
			content: $('#biaodan'), //可以使用$('#id,.class')这种方式来指定模板，可以将其理解为指定一个组件，当然也是可以自己去写的,像'<div>我是一个内容</div>'
			// 打开弹窗的回调函数，用于回显页面数据
			success: function () {
				console.log('我打开了弹窗')
			},
		})
	})
	// 表单提交事件
	form.on('submit(submit)', function (data) {
		console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
		console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
		console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
		return false //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	})
})


layui.use('table', function () {

    var table = layui.table;

    //方法渲染
    table.render({
        elem: '#userdata',  //绑定table表格
        height: 500,
        url: '/userInfoList' //数据接口
        , page: true //开启分页
        , cols: [
            [ //表头
                {type: 'checkbox'}
                , {field: 'id', title: '用户ID', width: 70, sort: true}
                , {field: 'username', title: '用户名', width: 100, sort: true}
                , {field: 'email', title: '邮箱', width: 130}
                , {field: 'mobile', title: '手机号', width: 130}
                , {field: 'nickname', title: '昵称', width: 130}
                , {field: 'icon', title: '图片', width: 130, templet: function(res) { return '<div onclick="show_img(this)" ><img width="50px" height="50px" src=' + res.icon + '></a></div>' }}

                , {field: 'roleId', title: '角色', width: 130,templet: function (res) {//用户角色。0：正常；1：禁用
                    if (res.roleId == '1') {
                        return '<span >后台管理员</span>'
                    } else if (res.roleId == '2') {
                        return '<span >商家</span>'
                    } else if (res.roleId == '3'){
                        return '<span >超级管理员</span>'
                    }else if (res.roleId == '0'){
                        return '<span >测试人员</span>'
                    }else {
                        return '<span >骑手</span>'
                    }
                }}
                ,{field: 'note', title: '备注信息', width: 130}
                , {
                field: 'status', title: '状态', width: 100, templet: function (res) {//用户状态。0：正常；1：禁用
                    if (res.status == '1') {
                        return '<span class="layui-badge layui-bg-green">正常</span>'
                    } else if (res.status == '0') {
                        return '<span class="layui-badge layui-bg-black">禁止</span>'
                    } else {
                        return '<span class="layui-badge layui-bg-gray">已删除</span>'
                    }
                }, unresize: true
            }
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 130}
            ]
        ]
    });

    table.on('tool(userdata)', function (obj) {  //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data;   //获得当前行数据
        console.log("del:::" + obj)
        if (obj.event === 'del') {
            //删除数据


            //执行ajax请求
            $.ajax({
                url: '/userDelete?id=' + data.id,
                method: 'GET',
                dataType: 'text',
                success: function (data) {
                    layer.msg(data);
                    obj.del();   //删除对应行（tr）的DOM结构，并更新缓存
                    parent.window.location.reload();//重新页面
                }
            });
        } else if (obj.event === 'modify') {   //修改数据
            layer.open({
                type: 2,
                title: '修改数据'   //标题
                , area: ['700px', '600px']    //宽高
                , content: ['/updateAdmin?id=' + data.id] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            });
        }
    });

    $('#userBtnAdd').click(function () {
        layer.open({
            type: 2,
            title: '新增'   //标题
            , area: ['600px', '500px']    //宽高
            , content: ['/userInfoAdd'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
        });
    });

    $('#userBtnSearch').click(function () {
        debugger
        var key = $('#userSltKey').val();
        var value = $('#userEdtSearch').val();
        table.reload('userdata', {where: {type: key, keywords: value}});
    });
    $('#userBtnpage').click(function () {
        parent.window.location.reload();//重新页面

    });

});

function show_img(t) {
    var t = $(t).find("img");
    //页面层
    layer.open({
        type: 1,
        title: '图片',
        skin: 'layui-layer-rim', //加上边框
        area: ['100%', '100%'], //宽高 t.width() t.height()
        shadeClose: true, //开启遮罩关闭
        end: function (index, layero) {
            return false;
        },
        content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
    });
}
